/* -------------------- LAYOUT -------------------- */

body {
  overflow-x: hidden;
}

* {
  position: relative;
  background-repeat: no-repeat;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}


// FLEX

.list-flex {
  display: flex;
  li {
    flex: 1;
    flex-basis: auto;
  }
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
  flex-basis: auto;
}

.flex-2 {
  flex: 2;
  flex-basis: auto;
}

.flex-3 {
  flex: 3;
  flex-basis: auto;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.align-content-center {
  align-content: center;
}

.justify-center {
  justify-content: center;
}

.flex-end {
  justify-content: flex-end;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.shrink-0 {
  flex-shrink: 0;
}

.basis-100 {
  flex-basis: 100%;
}


// ADJUSTMENTS

.z-5 {
  z-index: 5;
}

.z-shallow {
  z-index: 100;
}

.bump-up {
  top: -1px;
}

.bump-up-2 {
  top: -2px;
}

.bump-right {
  left: 1px;
}

.bump-down {
  top: 1px;
}

.bump-down-2 {
  top: 2px;
}

.bump-left {
  left: -1px;
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}


// POSITIONING

.static {
  position: static;
}


/* FIXED */

.fixed-c-c {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

.fixed-t-l {
  position: fixed;
  top: .5rem;
  left: .5rem;
}

.fixed-t-c {
  position: fixed;
  top: .5rem;
  left: 50vw;
  transform: translateX(-50%);
}

.fixed-t-r {
  position: fixed;
  top: .5rem;
  right: .5rem;
}

.fixed-c-l {
  position: fixed;
  top: 50vh;
  left: .5rem;
  transform: translateY(-50%);
}

.fixed-c-r {
  position: fixed;
  top: 50vh;
  right: .5rem;
  transform: translateY(-50%);
}

.fixed-b-l {
  position: fixed;
  bottom: .5rem;
  left: .5rem;
}

.fixed-b-c {
  position: fixed;
  bottom: .5rem;
  left: 50vw;
  transform: translateY(-50%);
}

.fixed-b-r {
  position: fixed;
  right: .5rem;
  bottom: .5rem;
}


/* ABSOLUTE */

.abs-c-c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.abs-b-r {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
}

.abs-t-r {
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.abs-b-l {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
}

.abs-t-l {
  position: absolute;
  top: .5rem;
  left: .5rem;
}


// CMS COMPONENTS IN FRONT-END

.inline-module {
  &-fw {
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    .img-fluid {
      width: 100%;
    }
    &.image-group {
      width: calc(100vw + 30px);
      margin-left: 0;
    }
  }
  &-lg {
    @include media-breakpoint-up(md) {
      width: calc(100% + 200px);
      margin-left: -100px;
    }
    &.image-group {
      width: calc(100% + 230px);
      margin-left: -115px;
    }
  }
  .img-fluid {
    width: 100%;
  }
}

.inline-module {
  margin-top: 30px;
  margin-bottom: 30px;
  figure {
    figcaption {
      @include ellipsis(100%);
    }
  }
}

.inline-editable-image-container {
  margin-top: 30px;
  margin-bottom: 30px;
}

p + .inline-module {
  margin-top: 60px;
}



/* -------------------- SPACING -------------------- */

/* Margin */

.m-l-auto {
  margin-left: auto !important;
}

.m-b-gutter {
  margin-bottom: $grid-gutter-width;
}



/* -------------------- STATES -------------------- */

.no-scroll {
  overflow: hidden !important;
  height: 100%;
}

.no-scroll-sm-down {
  @include media-breakpoint-down(sm) {
    overflow: hidden !important;
    height: 100%;
    body {
      overflow: hidden !important;
      height: 100%;
    }
  }
}

.scrollable {
  overflow-y: scroll;
}

.no-border {
  border: none !important;
}



/* -------------------- COLOR CLASSES -------------------- */

.primary-color {
  color: $primary-color;
}

.primary-hover {
  color: $primary-hover;
}

.primary-fade {
  color: $primary-light;
}

.secondary-color {
  color: $secondary-color;
}

.white {
  color: $white;
}

.off-white {
  color: $off-white;
}


.off-white-1 {
  color: $off-white-1;
}

.off-white-2 {
  color: $off-white-2;
}

.black {
  color: $black;
}

.gray-1 {
  color: $gray-1;
}

.gray-2 {
  color: $gray-2;
}

.gray-3 {
  color: $gray-3;
}

.gray-4 {
  color: $gray-4;
}

.gray-5 {
  color: $gray-5;
}

.gray-6 {
  color: $gray-6;
}

.gray-7 {
  color: $gray-7;
}

.gray-8 {
  color: $gray-8;
}

.gray-9 {
  color: $gray-9;
}

.beige {
  color: $beige;
}

.beige-1 {
  color: $beige-1;
}

.brown {
  color: $beige;
}

.red {
  color: $red;
}

.yellow {
  color: $yellow;
}

.blue {
  color: $blue;
}

.steel-blue {
  color: $steel-blue;
}

.steel-blue-1 {
  color: $steel-blue-1;
}

.green {
  color: $green;
}

.mint {
  color: $mint;
}

.salmon {
  color: $salmon;
}

.maroon {
  color: $maroon;
}

.olive {
  color: $olive;
}

.orange {
  color: $orange;
}



/* -------------------- BG COLOR CLASSES -------------------- */

.primary-color-bg {
  background-color: $primary-color !important;
}

.primary-hover-bg {
  background-color: $primary-hover !important;
}

.primary-fade-bg {
  background-color: $primary-light !important;
}

.secondary-color-bg {
  background-color: $secondary-color !important;
}

.white-bg {
  background-color: $white !important;
}

.off-white-bg {
  background-color: $off-white !important;
}

.off-white-1-bg {
  background-color: $off-white-1 !important;
}

.off-white--2bg {
  background-color: $off-white-2 !important;
}

.black-bg {
  background-color: $black !important;
}

.gray-1-bg {
  background-color: $gray-1 !important;
}

.gray-2-bg {
  background-color: $gray-2 !important;
}

.gray-3-bg {
  background-color: $gray-3 !important;
}

.gray-4-bg {
  background-color: $gray-4 !important;
}

.gray-5-bg {
  background-color: $gray-5 !important;
}

.gray-6-bg {
  background-color: $gray-6 !important;
}

.gray-7-bg {
  background-color: $gray-7 !important;
}

.gray-8-bg {
  background-color: $gray-8 !important;
}

.gray-9-bg {
  background-color: $gray-9 !important;
}

.beige-bg {
  background-color: $beige !important;
}

.beige-1-bg {
  background-color: $beige-1 !important;
}

.brown-bg {
  background-color: $brown !important;
}

.blue-bg {
  background-color: $blue !important;
}

.steel-blue-bg {
  background-color: $steel-blue !important;
}

.steel-blue-1-bg {
  background-color: $steel-blue-1 !important;
}

.red-bg {
  background-color: $red !important;
}

.yellow-bg {
  background-color: $yellow !important;
}

.green-bg {
  background-color: $green !important;
}

.mint-bg {
  background-color: $mint !important;
}

.salmon-bg {
  background-color: $salmon !important;
}

.maroon-bg {
  background-color: $maroon !important;
}

.olive-bg {
  background-color: $olive !important;
}

.orange-bg {
  background-color: $orange !important;
}



/* -------------------- STYLIZE -------------------- */

*::selection {
  color: $white;
  background: $primary-light; /* Safari */
}

p::-moz-selection {
  color: $white;
  background: $primary-light; /* Firefox */
}

.border-radius {
  border-radius: $border-radius;
}

.border-radius-double {
  border-radius: $border-radius * 2;
}

.box-shadow {
  background: red;
  box-shadow: $shadow;
}



/* -------------------- ICONS -------------------- */

.icon-sm {
  font-size: .625rem;
}

.icon-stack {
  .circle {
    position: absolute;
    top: 0;
  }
  .icon-stack-1x {
    top: -1px;
    left: -6px;
    font-size: 14px;
  }
}

.icon-only {
  padding: .375rem 0;
  .icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}



/* -------------------- IMAGES -------------------- */

.circle-img {
  width: 100%;
  padding-top: 100%;
  border-radius: 100%;
}

.image-link {
  display: block;
  background: $gray-5;
  &:hover img {
    opacity: .8;
  }
}

.image-link img {
  transition: .2s $bezier;
}

.image-row {
  margin-top: 60px;
  margin-bottom: 60px;
}

.image-group {
  margin: 30px -15px;
  &.active {
    display: flex;
    flex-wrap: wrap;
    .inline-editable-image-container {
      .img-layout {
        display: none;
      }
    }
  }
  .inline-editable-image-container,
  .image-group-img {
    flex: 1;
    flex-basis: auto;
    margin-top: 0;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
    &.first-child {
      margin-left: 0;
    }
    &.last-child {
      margin-right: 0;
    }
  }
}

.img-responsive {
  @include img-fluid();
}



/* -------------------- BACKGROUNDS -------------------- */

.cover-bg {
  background-position: center center;
  background-size: cover;
}

.contain-bg {
  background-size: contain;
}

.bg-fade {
  background-color: $gray-3;
  background-blend-mode: multiply;
}

.bg-fade-hover {
  transition: .2s $bezier;
  background-color: $white;
  background-blend-mode: multiply;
  &:hover {
    transition-duration: .35s;
    background-color: $gray-3;
  }
}

.bg-fade-text {
  transition: .2s $bezier;
  background-color: $gray-4;
  background-blend-mode: multiply;
  &:hover {
    transition-duration: .35s;
    background-color: $gray-5;
  }
  &.white {
    &:hover {
      color: $white;
    }
  }
}

.bg-overlay {
  background-blend-mode: overlay;
}

.bg-none {
  background: transparent !important;
}

.bg-t-l {
  background-position: left top !important;
}

.bg-t-c {
  background-position: center top !important;
}

.bg-t-r {
  background-position: right top !important;
}

.bg-c-l {
  background-position: left center !important;
}

.bg-c-c {
  background-position: center center !important;
}

.bg-c-r {
  background-position: right center !important;
}

.bg-b-l {
  background-position: left bottom !important;
}

.bg-b-c {
  background-position: center bottom !important;
}

.bg-b-r {
  background-position: right bottom !important;
}

.bg-b-r {
  background-position: right bottom !important;
}



/* -------------------- VIDEO -------------------- */

.video-wrapper {
  height: 0;
  margin-top: 45px;
  margin-bottom: 45px;
  padding-bottom: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-16-9 {
  height: 0;
  margin-top: 45px;
  margin-bottom: 45px;
  padding-bottom: 56.25%;
}

.video-16-9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-ws {
  height: 0;
  margin-top: 45px;
  margin-bottom: 45px;
  padding-bottom: 42.18%;
}

.video-ws iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* -------------------- NAVIGATION -------------------- */

.navbar-fixed-top {
  transition: .2s $bezier .3s;
  opacity: 0;
  &.visible,
  &.navbar-cover,
  &:hover {
    transition-delay: 0s;
    opacity: 1;
  }
}


/* -------------------- LOADER -------------------- */

.loader {
  position: relative;
  display: none;
  margin: 0;
  text-align: center;
  vertical-align: middle;
}

.loader:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  border: 3px solid rgba(0, 0, 0, .1);
  border-radius: 500rem;
}

.loader:after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  animation: loader 1s linear;
  animation-iteration-count: infinite;
  border-width: 3px;
  border-style: solid;
  border-color: #aaaaaa transparent transparent;
  border-radius: 500rem;
  box-shadow: 0 0 0 1px transparent;
}

// LOADER ANIMATION

@-webkit-keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


/* VARIATIONS */

// SIZES

.xs.loader {
  width: 16px;
  height: 16px;
  &:before,
  &:after {
    width: 16px;
    height: 16px;
    margin: 0 0 0 -8px;
    border-width: 2px;
  }
}

.sm.loader {
  width: 24px;
  height: 24px;
  &:before,
  &:after {
    width: 24px;
    height: 24px;
    margin: 0 0 0 -12px;
  }
}

.loader {
  width: 40px;
  height: 40px;
  &:before,
  &:after {
    width: 40px;
    height: 40px;
    margin: 0 0 0 -20px;
  }
}

.lg.loader {
  width: 80px;
  height: 80px;
  &:before,
  &:after {
    width: 80px;
    height: 80px;
    margin: 0 0 0 -40px;
  }
}


// INVERTED

.inverted.loader {
  color: #ffffff;
}

.inverted.loader:before {
  border-color: rgba(255, 255, 255, .15);
}

.inverted.loader:after {
  border-top-color: #ffffff;
}


// STATES

.reverse.loader:after {
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-direction: reverse;
          animation-direction: reverse;
}

.loader.active {
  display: block;
}

.inline.loader.active {
  display: inline-block;
}

.btn {
  .loader {
    display: inline-block;
  }
}

.loader.pause {
  &:after {
    animation: none;
    transform: rotate(135deg);
  }
}


/* -------------------- BROWSER UPDATE -------------------- */

.browser-update-wrapper {
  position: fixed;
  z-index: 1000000;
  width: 100%;
  height: 100%;
  background: rgba($white,.95);
  .browser-update {
    padding-top: 120px;
    h1 {
      margin-bottom: 15px;
    }
    .current-browser {
      font-weight: 500;
    }
    .browser-download {
      display: block;
      font-size: 21px;
      font-weight: 600;
      text-align: center;
      &:hover {
        img {
          opacity: .85;
        }
      }
      img {
        max-width: 128px;
        margin: 0 auto 15px;
        transition: .2s ease-out;
      }
    }
    .ie-disclaimer {
      padding-top: 60px;
    }
  }
}



/* -------------------- TYPOGRAPHY -------------------- */

h1 hr {
  width: 10rem;
  margin: 2rem auto 2rem;
  border-width: 2px;
  border-color: inherit;
}

h2 hr,
h3 hr,
h4 hr,
h5 hr,
h6 hr {
  width: 8rem;
  margin: 2rem auto 2rem;
  border-width: 2px;
  border-color: inherit;
}

hr {
  &.lg {
    border-width: 4px;
  }
  &.sm {
    width: 6rem;
  }
}

.tight {
  line-height: 1.5em;
}

.lead-sm {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.light {
  font-weight: 400;
}

.normal {
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

.bolder {
  font-weight: bolder;
}

.lighter {
  font-weight: lighter;
}

.ellipsis {
  @include ellipsis(100%);
}

.ellipsis-auto {
  @include ellipsis(auto);
}

.inline-ellipsis {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cover {
  color: $white;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $white;
  }
}

p {
  margin-bottom: $paragraph-margin-bottom;
}

.page-body {
  p + ul {
    top: -1rem;
  }
  hr {
    margin: 3rem auto;
    width: 10rem;
  }
}

.blockquote {
  .footer {
    text-align: right;
    font-size: 1rem;
    font-weight: 500;
  }
}

.pullquote{
  margin: 2rem -2rem;
  border: 4px solid $red;
  padding: 2rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: $red;
}



/* -------------------- FORMS -------------------- */

.form-control,
.custom-select,
textarea {
  &:hover {
    border-color: $gray-3;
    box-shadow: 0 0 6px 0 rgba($gray-6,.1);
  }
}
.form-control-lg {
  font-size: 1rem;
}
textarea {
  height: 137px;
  resize: vertical;
}
label {
  text-align: right;
}

.custom-select {
  border-radius: $input-border-radius;
  &.form-control-lg {
    padding: .75rem 1.25rem;
  }
}

.custom-indicator {
  border: 1px solid $gray-3;
}

.custom-input > input:focus ~ .custom-indicator {
  border-color: $gray-5;
  box-shadow: 0 0 3px 0 rgba($gray-6,.35);
}

.custom-select:focus {
  border-color: $gray-5;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px 0 rgba($gray-6,.15);
}

.select-area,
.form-control {
  transition: .2s $bezier;
  box-shadow: none;
}


.form-control {
  &::placeholder {
    font-size: 16px;
    line-height: 1.6;
  }
}

input:not([type="checkbox"]):focus,
.form-control:focus,
input[type="select"]:focus,
select:focus {
  border-color: $gray-5 !important;
  outline: 0 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px 0 rgba($gray-6,.15);
}

.placeholder-labels {
  .form-group {
    label {
      @include ellipsis(auto);
      position: absolute;
      top: $input-padding-y;
      left: $input-padding-x;
      font-size: .8rem;
      transition: .2s $bezier;
      pointer-events: none;
      opacity: 0;
      color: $gray-5;
    }
  }
  .form-control:not(.no-placeholder) {
    &:focus {
      padding-top: $input-padding-y + .85rem;
      &::-webkit-input-placeholder {
        display: none;
        visibility: hidden;
      }
      &::shadow {
        display: none;
        visibility: hidden;
      }
      &::-moz-placeholder {
        display: none;
        visibility: hidden;
        opacity: 0;
      }
      & + label {
        top: 0;
        opacity: 1;
      }
    }
  }
  .form-control-lg:not(.no-placeholder) {
    &:focus {
      padding-top: $input-padding-y-lg + .85rem;
    }
    & + label {
      left: $input-padding-x-lg;
    }
  }
}

.field-row {
  flex-wrap: wrap;
  margin-right: ($spacer-y / -4) !important;
  margin-left: ($spacer-y / -4) !important;
  .form-control {
    flex-basis: 120px;
  }
}

.validation {
  @include ellipsis(100%);
  z-index: 5;
  bottom: -5px;
  display: block;
  height: 0;
  margin-top: -5px;
  padding-right: 15px;
  padding-bottom: 0;
  padding-left: 15px;
  font-size: 12px;
  transition: .2s ease-out;
  white-space: nowrap;
  color: $white;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  background: $red;
  &.active {
    height: 25px;
  }
}

.has-error .form-control:focus {
  border-color: $red;
  box-shadow: none;
}



/* -------------------- COMPONENTS -------------------- */

.dropdown-menu {
  border: 1px solid $gray-1;
  box-shadow: $shadow;
  li {
    margin: 0;
    a {
      padding: 5px 15px;
    }
  }
  .divider {
    margin: 5px 0;
  }
  &.scroll-menu {
    overflow-x: hidden;
    height: auto;
    max-height: 450px;
  }
}

.dropdown-hover {
  &:hover,
  &.open {
    .dropdown-menu {
      left: 0;
      transition-delay: 0;
      opacity: 1;
    }
  }
  .dropdown-menu {
    left: -5000px;
    display: block;
    margin-top: 0;
    transition: opacity .2s $bezier .35s, left 0 .5s;
    opacity: 0;
  }
  .btn,
  a {
    display: block;
    text-align: left;
  }
}

.tooltip {
  .tooltip-inner {
    padding: 10px 15px;
    font-family: $primary-font;
    font-weight: 600;
    background: $gray-5;
  }
  &.top {
    .tooltip-arrow {
      border-top-color: $gray-5;
    }
  }
}

.close-btn {
  position: absolute;
  z-index: 100;
  top: 10px;
  right: 10px;
  font-size: 12px !important;
  line-height: 12px !important;
  .icon {
    font-size: 12px !important;
    line-height: 12px !important;
  }
  &.close-btn-out {
    top: -25px;
    right: -25px;
    padding: 8px;
  }
}

.datepicker-wrapper {
  position: absolute;
  z-index: 150;
  visibility: hidden;
  width: 290px;
  margin-top: 5px;
  padding: 15px;
  transition: visibility 0s $bezier .2s, all .2s $bezier;
  transform: scale(1.2);
  opacity: 0;
  border-radius: $border-radius;
  background: $white;
  box-shadow: 0 0 6px 0 rgba(50, 50, 50, .2);
  .datepicker-fields {
    display: flex;
    flex-wrap: nowrap;
    margin-right: -5px;
    margin-left: -5px;
    .form-group {
      flex: 1;
      flex-basis: auto;
      margin-right: 5px !important;
      margin-left: 5px !important;
      .form-control {
        height: 42px !important;
        font-size: 14px;
        &:placeholder {
          font-size: 14px;
        }
      }
    }
  }
  .form-group {
    margin-bottom: 15px !important;
  }
  .bootstrap-datetimepicker-widget {
    .disabled {
      color: $gray-4 !important;
    }
  }
  .bootstrap-datetimepicker-widget {
    width: 100%;
  }
  &.left {
    left: 0;
  }
  &.right {
    right: 0;
  }
  &.center {
    left: 50%;
    transform: translateX(-50%);
  }
  &.lg {
    width: 320px;
  }
  &.fluid {
    width: 100%;
  }
  &.active {
    visibility: visible;
    transition-delay: 0s;
    transform: scale(1.0);
    opacity: 1;
  }
}

.ui-autocomplete {
  position: absolute;
  z-index: 5;
  overflow-y: auto;
  max-height: 10rem;
  padding: .5rem 0;
  border-radius: $radius;
  background-color: $white;
  box-shadow: $shadow;
  .ui-menu-item {
    padding: .15rem .75rem;
    cursor: pointer;
  }
  .ui-state-focus {
    color: $white;
    background: $primary-hover;
  }
  .icon {
    color: $gray-3;
  }
}

.ui-helper-hidden-accessible {
  display: none;
}

.collapse-toggle {
  .open-state {
    display: block;
  }
  .collapsed-state {
    display: none;
  }
  &.collapsed {
    .open-state {
      display: none;
    }
    .collapsed-state {
      display: block;
    }
  }
}

.search-btn {
  .icon-search {
    display: inline-block;
  }
  .loader {
    display: none;
  }
}

.searching {
  .icon-search {
    display: none;
  }
  .loader {
    display: inline-block;
  }
}


// DIMMER

.dimmer {
  &:after {
    position: fixed;
    top: 0;
    left: 0;
    visibility: visible;
    width: 0;
    height: 0;
    content: "";
    transition: opacity .2s $bezier, width 0 .2s, height 0 .2s;
    opacity: 0;
    background: rgba(255, 255, 255, .85);
  }
  &.dimmed,
  &.dimmed-editing {
    &:after {
      width: 100%;
      height: 100%;
      transition-delay: 0;
      opacity: 1;
    }
  }
  &.dimmed-editing {
    &:after {
      z-index: 900;
    }
    .glass-edit {
      z-index: 950;
    }
    .navbar {
      z-index: 850;
    }
  }
  &.dimmed {
    &:after {
      z-index: 1036;
    }
  }
  &.dimmer-shallow {
    &:after {
      z-index: 50;
    }
  }
}


// CIRCLE ICON

.circle-icon {
  @include circle(30px);
  display: inline-block;
  transition: .2s $bezier;
  text-align: center;
  color: $black;
  border: 1px solid $black;
  .icon {
    margin: 0 !important;
    font-size: 14px;
    line-height: 28px;
  }
  &-sm {
    @include circle(20px);
    line-height: 1;
    .icon {
      width: 10px;
      height: 10px;
      font-size: 10px;
      line-height: 20px;
      &:last-child {
        margin-left: -10px !important;
      }
    }
  }
  &-md {
    @include circle(45px);
    .icon {
      font-size: 21px;
      line-height: 45px;
    }
  }
  &-white {
    color: $primary-color;
    border-color: $white;
    background-color: $white;
    &:hover {
      color: $white;
      border-color: $primary-color;
      background-color: $primary-color;;;
    }
  }
}


a.circle-icon,
button.circle-icon {
  &:link,
  &:visited {
    color: $black;
  }
  &:hover,
  &:focus {
    color: $white;
    border-color: $primary-dark;
    background: $primary-dark;
  }
}

.circle-icon.fluid-width {
  width: auto;
  min-width: 30px;
  padding: 0 10px 0 10px;
  span {
    padding-top: 2px;
  }
}



// NOTES

[data-note] {
  outline: $red dotted 2px;
}

[data-note]:hover:after {
  position: absolute;
  z-index: 90;
  display: inline-block;
  width: 300px;
  padding: 15px;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.6;
  content: "**Note**\A" attr(data-note);
  white-space: pre-wrap;
  color: black;
  border-radius: 5px;
  background-color: $gray-2;
  box-shadow: $shadow;
}

[data-tooltip] {
  &:after {
    position: absolute;
    z-index: 90;
    top: -35px;
    left: 50%;
    display: inline-block;
    padding: 5px 12px;
    font-weight: normal;
    content: attr(data-tooltip);
    user-select: none;
    transition: .2s $bezier;
    transform: scale(.9) translateX(-50%);
    white-space: pre-wrap;
    pointer-events: none;
    opacity: 0;
    color: $off-white;
    border-radius: 5px;
    background-color: $gray-6;
    box-shadow: $shadow;
  }
  &:before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
    user-select: none;
    transition: .2s $bezier;
    transform: scale(.9) translateX(-50%);
    pointer-events: none;
    opacity: 0;
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: $gray-6 transparent transparent transparent;
  }
  &:hover {
    &:before,
    &:after {
      transform: scale(1) translateX(-50%);
      opacity: 1;
    }
  }
}



/* -------------------- MOFIFIERS -------------------- */

.transitionable {
  transition: .2s ease-out;
}

.no-flicker {
  -webkit-transform: translate3d(0,0,0);
}



/* -------------------- LINKS -------------------- */

a {
  transition: .2s $bezier;
  &:focus {
    outline: 0;
  }
}



/* -------------------- BUTTONS -------------------- */


// RESET

button {
  padding: 0;
  text-decoration: none !important;
  color: $primary-color;
  border: none;
  background: none;
  &:hover,
  &:focus {
    text-decoration: none !important;
    color: $primary-hover;
  }
  &:active {
    outline: 0 !important;
    box-shadow: none;
  }
  &:focus {
    outline: 0 !important;
  }
  &:active:focus {
    outline: 0 !important;
  }
}

.btn {
  transition: .2s $bezier;
  &:active {
    outline: 0 !important;
    box-shadow: none;
  }
  &:focus {
    outline: 0 !important;
  }
  &:active:focus {
    outline: 0 !important;
  }
  &:disabled {
    cursor: not-allowed;
  }
  &.bold {
    font-weight: 600;
  }
}



// STYLES

/* BACKGROUND, BG, BORDER */

.btn-default {
  @include button-variant($gray-6, $gray-1, $gray-1);
}

.btn-secondary {
  @include button-variant($white, $gray-6, $gray-6);
}

.btn-outline-secondary {
  @include button-outline-primary-variant($gray-6);
  border-color: $gray-3;
}

.btn-white {
  @include button-primary-variant($primary-color, $white, $white);
}

.btn-outline-white {
  @include button-outline-primary-variant($white);
}


/* BTN LINKS */

.btn-inline {
  padding: 0;
  font-size: inherit;
  vertical-align: baseline;
  border: none;
  &:link,
  &:visited {
    color: $primary-color;
  }
  &:hover,
  &:focus,
  &:active,
  &.active {
    text-decoration: none;
    color: $primary-hover;
  }
}

.btn-link-gray {
  color: $gray-6;
  &:link,
  &:visited {
    color: $gray-6;
  }
  &:hover,
  &:focus,
  &:active,
  &.active {
    text-decoration: none;
    color: $primary-hover;
  }
}

.btn-link-red {
  color: $red;
  &:link,
  &:visited {
    color: $red;
  }
  &:hover,
  &:focus,
  &:active,
  &.active {
    text-decoration: none;
    color: lighten($red, 15);
    box-shadow: none;;
  }
}

.btn-hover-red {
  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $white;
    border-color: $red;
    background: $red;
  }
}

.btn-file {
  position: relative;
  overflow: hidden;
  padding-top: 8px !important;
  padding-bottom: 9px !important;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  cursor: inherit;
  text-align: right;
  opacity: 0;
  outline: none;
  background: white;
}


// MODIFIERS

.btn-block {
  display: block;
  width: 100%;
}

.btn-rotate {
  -webkit-transform: translateZ(0);
  .icon {
    transition: .15s $bezier;
  }
  &:hover {
    .icon {
      transform: rotate(360deg);
    }
  }
}

.btn-round {
  border-radius: 3rem;
}

.btn-hover-spin {
  .icon {
    transition: .2s $bezier;
  }
  &:hover,
  &:focus {
    .icon {
      transform: rotate(180deg) scale(-1, 1) translate(0, 1px);
    }
  }
}

.btn-circle {
  width: 48px;
  height: 48px;
  padding: .375rem 0rem;
  line-height: 1.7;
  border-radius: 3rem;
}


// SIZES

.btn-xs {
  padding: .15rem .75rem;
  font-size: .65rem;
}

.btn-md {
  padding: .25rem .75rem;
  font-size: .85rem;
}

.btn-lg {
  padding: .65rem 1.25rem;
  font-size: 1rem;
}


// STATES

.btn:focus,
input[type="submit"]:focus {
  outline: 0 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px 0 rgba($primary-color,.25);
}

.btn-link:focus,
.btn-link-gray:focus {
  color: $primary-hover;
  box-shadow: none;
}

.btn-toggle-icons {
  white-space: nowrap;
  .icon {
    width: 22px;
    height: 22px;
    margin: 0 !important;
    transition: .15s $bezier;
    &:last-of-type {
      margin-left: -22px !important;
      opacity: 0;
    }
    &:first-of-type {
      opacity: 1;
    }
  }
  &:not(.delay-toggle) {
    &:hover {
      .icon {
        transform: rotate(360deg);
        &:first-of-type {
          opacity: 0;
        }
        &:last-of-type {
          opacity: 1;
        }
      }
    }
    &.toggled {
      &:hover {
        .icon {
          transform: rotate(360deg);
          &:first-child {
            opacity: 1;
          }
          &:last-child {
            opacity: 0;
          }
        }
      }
    }
  }
  &.toggled {
    .icon {
      &:first-child {
        opacity: 0;
      }
      &:last-child {
        opacity: 1;
      }
    }
  }
}

.bars-toggle {
  width: 30px;
  height: 30px;
  .bar {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 30px;
    height: 3px;
    transition: .3s $bezier;
    border-radius: 2px;
    background-color: $gray-7;
    &-1 {
      margin-top: -6px;
    }
    &-3 {
      margin-top: 6px;
    }
  }
  &:hover,
  &:focus {
    .bar-1 {
      margin-top: -8px;
    }
    .bar-3 {
      margin-top: 8px;
    }
  }
  &:not(.collapsed) {
    .bar {
      background-color: $gray-4;
    }
    .bar-1 {
      margin-top: 0;
      transform: rotate(45deg);
      transform-origin: center center;
    }
    .bar-2 {
      opacity: 0;
    }
    .bar-3 {
      margin-top: 0;
      transform: rotate(-45deg);
      transform-origin: center center;
    }
  }
  &-sm {
    width: 16px;
    height: 16px;
    .bar {
      width: 16px;
      height: 2px;
      &-1 {
        margin-top: -4px;
      }
      &-3 {
        margin-top: 4px;
      }
    }
    &:hover,
    &:focus {
      .bar-1 {
        margin-top: -6px;
      }
      .bar-3 {
        margin-top: 6px;
      }
    }
  }
}

.btn {
  .progress {
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}
